<template>
    <view class="container">
        <view class="hlbblock" style="overflow: hidden">
            <view style="background-color:#f53630;height: 220rpx;padding: 40rpx;position: relative ">
                <view style="color: white;display: flex;justify-content: space-between;align-items: baseline">
                    <view>
                        {{verifygoods.product_name}}
                    </view>
                    <view @click="popshow=true" style="font-size: 25rpx">
                        查看适用门店({{stores.length}})
                        <u-icon name="arrow-right" size="25" color="white"></u-icon>
                    </view>
                </view>
                <view v-if="item.product_type == 3" style="margin-top: 20rpx;font-size: 25rpx;color: rgba(255,255,255,0.7);display: flex;justify-content: space-between;align-items: baseline">
                    <view style="font-size: 25rpx">
                        剩余
                    </view>
                    <view style="font-size: 25rpx">
                        <block v-if="verifygoods.surplus_num>0">{{verifygoods.surplus_num}}次</block>
                        <block v-else>不限次数</block>
                    </view>
                </view>
                <view style="font-size: 25rpx;color: rgba(255,255,255,0.7);display: flex;justify-content: space-between;align-items: baseline">
                    <view style="font-size: 25rpx">
                        有效期
                    </view>
                    <view style="font-size: 25rpx">
                        {{verifygoods.time_verify_text.text}}
                    </view>
                </view>
            </view>
            <view style="background-color: #F2F2F2;width: 50rpx;height: 50rpx;border-radius: 50%;position: absolute;top: 245rpx;left: 15rpx">
            </view>
            <view style="background-color: #F2F2F2;width: 50rpx;height: 50rpx;border-radius: 50%;position: absolute;top: 245rpx;right: 15rpx">
            </view>
            <view style="background-color: white;padding: 30rpx 0">
                <view style="justify-content: center;display: flex;margin: 20rpx">
                    <view>
                        <view style="background-color: #F0F0F0;width: 200rpx;text-align: center;color: rgba(0,0,0,0.5)">
                            {{verifygoods.verify_code}}
                        </view>
                    </view>
                </view>
                <view style="justify-content: center;display: flex;position: relative;">
					<view v-if="verifygoods.time_verify_text.status == 3" style="position: absolute;top: 130rpx;width: 132rpx;height: 72rpx;background: #2D2D2D;color: #ffffff;z-index: 99;line-height: 72rpx;text-align: center;border-radius: 8rpx;">
						已核销
					</view>
                    <image :src="verifygoods.qrcode" :class="{'opacity-bg':verifygoods.time_verify_text.status == 3}" style="width: 400rpx;" mode="widthFix"></image>
                </view>

                <view style="text-align: center;color: rgba(0,0,0,0.5);padding: 32rpx 0 60rpx;">请将二维码出示给核销员</view>
				<view class="traveler-info" v-if="verifygoods.product_type == 4">
					<view class="title edit-info">
						<view>出行人信息</view>
						<view class="edit-btn">修改</view>
					</view>
					<view class="value">姓名：{{verifygoods.name}}</view>
					<view class="value">手机号：{{verifygoods.mobile}}</view>
					<view class="value">身份证号：{{verifygoods.id_card}}</view>
				</view>
            </view>
        </view>

        <navigator v-if="verifygoods.product_type == 4" :url="'/pagesVerify/verifygoods/log?pid='+verifygoods.opt_id+'&product_type=4'"  class="hlbbutton" style="width: 200rpx;height: 60rpx;line-height: 60rpx;margin: 40rpx auto;background-color:#F2F2F2;color: black;border:1px #CECECE solid;">
            核销记录
        </navigator>
		<navigator v-else :url="'/pagesVerify/verifygoods/log?pid='+verifygoods.opt_id+'&product_type=3'"  class="hlbbutton" style="width: 200rpx;height: 60rpx;line-height: 60rpx;margin: 40rpx auto;background-color:#F2F2F2;color: black;border:1px #CECECE solid;">
		    核销记录
		</navigator>

        <u-popup v-model="popshow"  height="700rpx"   mode="bottom"  border-radius="50" z-index="80" :closeable="true"  >
            <view style="padding: 30rpx;margin-top: 50rpx">
                <u-divider bg-color="white">适用门店</u-divider>

                <view class="fui-list noclick no-border" v-for="item in stores" >
                    <image src="/static/images/order/store.png" style="width: 45rpx;margin: 20rpx" mode="widthFix"></image>
                    <view class="fui-list-inner store-inner">
                        <view class="title">
                            <text class="storename">{{item.store_name}}</text>
                        </view>
                     <!--   <view class="text">
                            <text class="realname">{{item.realname}} {{item.mobile}}</text>
                        </view>-->
                        <view class="text">
                            <text class="address">{{item.address}}</text>
                        </view>
                    </view>
                    <view class="fui-list-angle ">
                        <view>
                            <image @click="tomap(item.latitude,item.longitude)" src="/static/images/order/store/map.png" style="width: 30rpx" mode="widthFix"></image>
                        </view>
                        <view>
                            <image @click="tomobile(item.phone)" src="/static/images/order/store/mobile.png" style="width: 30rpx" mode="widthFix"></image>
                        </view>
                    </view>
                </view>
            </view>
            <view style="height: 50rpx">
            </view>
        </u-popup>
    </view>
</template>

<script>
    var _self;
    export default{
        computed: {
        },
        data() {
            return {
                verifygoods:[],
                order_id:'',
                pid:'',
                stores:[],
                limitdatestr:'',
                canverify:false,
                verifycode:'',
                qrcode:'',
                popshow:false,
                verifynum:0
            };
        },
        onShow() {
            _self.getdata()
        },
        async onLoad(options){
            _self = this;
            _self.order_id = options.order_id;
            _self.type = options.type;

        },
        methods:{
            tomap(lat,lng){
                console.log(lat)
                if (lat==null||lat==''){
                    uni.showToast({
                        title: '暂无位置信息',
                        duration: 2000,
                        icon:'none'
                    });
                    return
                }
                uni.openLocation({
                    latitude: parseFloat(lat),
                    longitude: parseFloat(lng),
                    success: function () {
                    }
                });
            },
            tomobile(mobile){
                uni.makePhoneCall({
                    phoneNumber: mobile,
                    success: (res) => {
                        console.log('调用成功!')
                    },
                    fail: (res) => {
                        console.log('调用失败!')
                    }
                });
            },

            getdata() {
                let self = this;
                self._post(
                    'user.Order/getOrderVerifyInfo', {
                        product_type: self.type,
                        order_product_id: self.order_id
                    },
                    function(res) {
                        console.log(res)
                        let t =res.data;
                        _self.verifygoods= t;
                        _self.stores= t.store_list;
                    }
                );
            },
        },
    }
</script>

<style lang='scss'>
    page{
        background: #F2F2F2;
        padding-bottom: 160upx;
    }
    .icon-you{
        font-size: $font-base + 2upx;
        color: #888;
    }

    /*  弹出层 */
    .popup {
        position: fixed;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 199;

        &.show {
            display: block;
            .mask{
                animation: showPopup 0.2s linear both;
            }
            .layer {
                animation: showLayer 0.2s linear both;
            }
            .layer2 {
                animation: showLayer 0.2s linear both;
            }
        }
        &.hide {
            .mask{
                animation: hidePopup 0.2s linear both;
            }
            .layer {
                animation: hideLayer 0.2s linear both;
            }
            .layer2 {
                animation: hideLayer 0.2s linear both;
            }
        }
        &.none {
            display: none;
        }
        .mask{
            position: fixed;
            top: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
            background-color: rgba(0, 0, 0, 0.4);
        }
        .layer {
            position: fixed;
            z-index: 99;
            bottom: 0;
            width: 100%;
            min-height: 40vh;
            border-radius: 30rpx 30rpx 0 0;
            background-color: #fff;
            .btn{
                height: 66upx;
                line-height: 66upx;
                border-radius: 100upx;
                background: $uni-color-primary;
                font-size: $font-base + 2upx;
                color: #fff;
                margin: 30upx auto 20upx;
            }
        }
        .layer2 {
            position: fixed;
            z-index: 10075;
            bottom: 0;
            width: 100%;
            height: 350rpx;
            border-radius: 50rpx 50rpx 0 0;
            background-color: #fff;

        }
        @keyframes showPopup {
            0% {
                opacity: 0;
            }
            100% {
                opacity: 1;
            }
        }
        @keyframes hidePopup {
            0% {
                opacity: 1;
            }
            100% {
                opacity: 0;
            }
        }
        @keyframes showLayer {
            0% {
                transform: translateY(120%);
            }
            100% {
                transform: translateY(0%);
            }
        }
        @keyframes hideLayer {
            0% {
                transform: translateY(0);
            }
            100% {
                transform: translateY(120%);
            }
        }
    }
	.traveler-info {
		padding: 36rpx;
		border-top: 4rpx dotted #C4C4C4;
		.title {
			color: #1B1B1B;
			font-size: 32rpx;
			margin-bottom: 16rpx;
		}
		.value {
			color: #999999;
			font-size: 24rpx;
		}
		.edit-info {
			display: flex;
			justify-content: space-between;
			.edit-btn {
				color: #F63E36;
				font-size: 28rpx;
			}
		}
	}
	
	.opacity-bg {
		opacity: 0.5;
	}
</style>
